<template>
  <div class="page">
    <div class="pd bg-white weui-cells re">
        <input type="text" maxlength='15' placeholder="请输入班级名称" v-model="name" placeholder-class="holder"/>
        <span class="ab c-ccc" :class="{'c-red':name.length==15}">{{15-name.length<0?0:15-name.length}}/15</span>
    </div>
    <div class="bg-white pdh-l mgt-xl">
      <button type="button" class="ui btn primary" :loading="isLoading" :class="{'disabled': !name}" @tap="onCreate">完成</button>
    </div>
  </div>
</template>

<script>
import * as $group from '@/api/group'
import base from '@/mixins/base'
import { mapGetters, mapActions } from 'vuex'

export default{
  mixins: [base],
  data () {
    return {
      name: '',
      isLoading: false
    }
  },
  methods: {
    ...mapActions('group', [
      'getMyGroups'
    ]),
    async onCreate () {
      if (!this.name) return
      this.isLoading = true
      let group = await $group.create({name: this.name})
      this.isLoading = false
      if (!group) return
      this.$store.commit('group/GROUP_SET_GROUP', group)
      this.$store.commit('UI_SET_TOAST_SUCCESS_MSG', '创建成功！')
      wx.redirectTo({
        url: '/pages/teacher-invite/main'
      })
    }
  }
}
</script>

<style scoped>
  .ab{
    right: 32rpx;
    top: 32rpx;
  }
</style>
